<template>
  <div class="node-menu-wrapper">
    <!-- 通用节点：1.请求数据, 2.页面跳转, 3.数据转换 -->
    <div class="node-add-title">通用节点:</div>
    <div style="text-align: right; margin: 0">
      <a-menu mode="vertical" class="node-menu" :open="true" @select="addCommonNode">
        <a-menu-item v-for="(item, index) in commonNodeMap" :index="item.value" :key="index">
          <span class="menu-item-inner">
            <img :src="item.logo" alt="" class="icon" />
            {{ item.label }}
          </span>
        </a-menu-item>
      </a-menu>
    </div>
    <!-- <div class="split-line"></div> -->
    <!-- 组件节点：当前页面上已拖拽的节点 -->
    <!-- <div class="node-add-title">组件节点:</div>
    <div style="text-align: right; margin: 0">
      <el-menu mode="vertical" class="node-menu" :open="true" @select="addCompNode">
        <el-menu-item v-for="(item, index) in compOptions" :index="item.value" :key="index">
          <span @mouseenter.stop="handleCompEnter(item.value)" class="menu-item-inner">
            <img :src="item.logo" alt="" class="icon" />
            {{ item.label }}
          </span>
        </el-menu-item>
      </el-menu>
    </div> -->
    <div class="split-line" v-if="showConnectBlock && nodeOptions.length"></div>
    <!-- 连接至已有节点 -->
    <div class="node-add-title" v-if="showConnectBlock && nodeOptions.length">连接至已有节点:</div>
    <div style="text-align: right; margin: 0" v-if="showConnectBlock && nodeOptions.length">
      <a-menu mode="vertical" class="node-menu" :open="true" @select="connectToNode">
        <a-menu-item v-for="(item, index) in nodeOptions" :index="item.value" :key="index">
          <span @mouseenter.stop="handleNodeEnter(item.value)" class="menu-item-inner">
            <img :src="item.logo" alt="" class="icon" />
            {{ item.label }}
          </span>
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, unref, defineProps, watch, defineExpose, defineEmits , computed} from 'vue';
import { commonNodeMap, defaultLogo } from '../../util/typeMap'
import { getNodeName } from '../../util/node'

const key = ref(1);
const preNodeId = ref('');
const modelList = [];
const options = [];

// 定义组件接收的参数
const props = defineProps({
  lf: Object,
  show: Boolean,
  context: Object,
  graph: Object,
  position: Object,
  model: Object,
  showConnectBlock: Boolean
});

const emits = defineEmits(['change']);

const compOptions = computed(() => {
  const options = [];
  return options;
});

const nodeOptions = computed(() => {
  const data = props.lf?.getGraphData();
  const { nodes } = data;
  const options : any = [];
  nodes.forEach((node) => {
    if (node.type === 'event-node') {
      // 不允许连接到事件节点
      return;
    }
    const label = (node.properties && node.properties.name) || '未知';
    const logo = (node.properties && node.properties.logo) || defaultLogo;
    console.log('wang-aa', label);
    options.push({
      value: node.id,
      label: label,
      logo: logo,
    });
  });
  return options;
});

function hide() {
  const key = props.model?.id;
  setTimeout(() => {
    props.lf?.graphModel.popover.hide(key);
  }, 50)
}


// 鼠标悬浮时高亮画布对应组件
function handleCompEnter(e) {
}

// 鼠标悬浮节点时时高亮画布对应组件
function handleNodeEnter(e) {
  const nodeModel = props.lf?.getNodeModelById(e);
  props.lf?.graphModel.eventCenter.emit('node:hover-node', nodeModel);
}

function handleChange(e) {
  // this.val = e
  const option = options.find((item) => item.value === e) || {}
  const data = {
    type: 'option',
    value: e,
    valueDesc: option.label
  };
  emits('change', data);
}

// 目标节点后添加通用节点
function addCommonNode(e) {
  hide();
  const nodeData = {};
  if (e === 'pageInit') {
    nodeData.type = 'event-node';
    nodeData.properties = {
      componentId: 'page_init',
      name: commonNodeMap[e].label,
      componentName: e,
      logo: commonNodeMap[e].logo
    };
  } else {
    nodeData.type = 'common-node';
    nodeData.properties = {
      type: e,
      name: commonNodeMap[e].label,
      componentName: e,
      logo: commonNodeMap[e].logo
    };
  }
  if (props.model) {
    nodeData.model = props.model;
    props.lf?.graphModel.eventCenter.emit('node:add-node', nodeData);
  } else {
    //addNodeInPosition(nodeData);
  }
}

// 目标节点后添加组件节点
function addCompNode(e) {
  hide()
  const model = modelList.find((item) => item.id === e);
  const logic = model.getLogic();
  const componentName = model.componentName;
  const material = this.context.getMaterialByType(componentName);
  const logo = material.logo || defaultLogo;
  const nodeData = {
    type: 'reaction-node',
    properties: {
      name: getNodeName(model),
      componentId: model.id,
      componentName: model.componentName,
      logo
    }
  }
  if (props.model) {
    nodeData.model = props.model;
    props.lf?.graphModel.eventCenter.emit(`node:add-node`, nodeData);
  }
}

// 连接至已有节点
function connectToNode(e) {
  hide();
  props.graph?.connectToNode(e, props.model);
}


</script>

<style lang="less" scoped>
.node-menu-wrapper {
  width: 194px;
}
.node-menu {
  border: none;
  padding: 4px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 120px;
  background: #f3f6fa;
  border-radius: 4px;
  .el-menu-item {
    text-align: left;
    height: 25px;
    line-height: 25px;
    padding: 0 !important;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #1f3252;
    font-weight: 400;
    &.is-active {
      background: rgba(41, 97, 239, 0.08);
      border-radius: 2px;
    }
  }
  .menu-item-inner {
    display: flex;
    align-items: center;
    margin-left: 2px;
  }
  .icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    filter: drop-shadow(#2961ef 100px 0);
    transform: translateX(-100px);
  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    background: transparent;
    border-radius: 5px;
    width: 4px;
    z-index: -1;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    background: #dcdfe6;
    z-index: -1;
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 4px;
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    /*滚动条交汇处*/
    border-radius: 4px;
    background: transparent;
  }
}

.node-add-title {
  height: 24px;
  line-height: 24px;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #303a51;
  font-weight: 500;
}
.menu-item-inner {
  display: block;
  height: 100%;
  width: 100%;
}
.split-line {
  width: 100%;
  border-bottom: 1px solid #dcdfe6;
  margin: 8px 0;
}
</style>
